<template>
  <div class="box">
    <div class="user"></div>
    <div class="info">
      <h2>
        基本信息
        <span class="edit">
          <el-button type="text" @click="dialogVisible = true"
            ><i class="el-icon-edit-outline"></i> 修改</el-button
          >
        </span>
      </h2>
      <div class="infoList">
        <ul>
          <li>用户昵称：{{form.callName}}</li>
          <li>用户ID：{{form._id}}</li>
          <li>真实姓名：{{form.realName}}</li>
          <li>性别：{{form.sex}}</li>
          <li>个人简介：{{form.introduce}}</li>
          <li>所在地区：{{form.location}}</li>
          <li>出生日期：{{form.birthdate}}</li>
          <li>
  <el-button type="danger" plain v-if="form._id" @click="loginOut">退出登录</el-button></li>
        </ul>
      </div>
    </div>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <div>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="用户昵称">
            <el-input v-model="form.callName"></el-input>
          </el-form-item>
          <el-form-item label="真实姓名">
            <el-input v-model="form.realName"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="form.sex">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="所在地区">
            <el-input v-model="form.location"></el-input>
          </el-form-item>
          <el-form-item label="出生日期">
            <el-col :span="11">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="form.birthdate"
                style="width: 100%"
              ></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="个人简介" prop="desc">
            <el-input type="textarea" v-model="form.introduce"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit"
          >确 定</el-button
        >
      </span>
    </el-dialog>

  </div>
</template>

<script>
import qs from 'qs'



export default {
  data() {
    return {
      dialogVisible: false,
      form: {
        callName: "",
        realName: "",
        sex: "",
        location: "",
        birthdate: "",
        introduce: "",
      },
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    onSubmit(){
    this.$request({
      url:'/home/editUser',
      method:'post',
      data:qs.stringify(this.form)
    }).then((success)=>{
      if(success.data.msg=='success'){
       this.dialogVisible=false
        this.$notify({
          title: '成功',
          message: '修改成功',
          type: 'success'
        });
      }else{
        this.$notify.error({
          title: '错误',
          message: '修改失败'
        });
      }
    })
    },
    loginOut(){
        this.$confirm('是否退出当前账号', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          localStorage.removeItem('token')
          this.$router.push('/login')
          this.$message({
            type: 'success',
            message: '已退出当前账号!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
    }
  },
    mounted(){
      this.$request({
        url:'/home/setting',
        method:'get',
      }).then((success)=>{
        this.form=success.data
   
      })
    }

};
</script>

<style scoped>
.info {
  padding: 20px;
  width: 800px;
  margin: 0 auto;
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}
h2 {
  position: relative;
  border-bottom: 2px solid gray;
  height: 50px;
  line-height: 50px;
}
.infoList {
  padding: 20px 20px;
  color: #555666;
}
ul li {
  height: 50px;
  line-height: 50px;
}
.edit {
  position: absolute;
  right: 0;
}
</style>